<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>后台管理登录</title>
    <!-- Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords"
          content="Particles Login Form Form a Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design">
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta-Tags -->
    <!-- Stylesheets -->
    <link href="/css/style.css" rel='stylesheet' type='text/css'/>
    <!-- online fonts-->
    <link href="https://fonts.googleapis.com/css?family=Amiri:400,400i,700,700i" rel="stylesheet">
</head>

<body>
<!--  particles  -->
<div id="particles-js"></div>
<!-- //particles -->
<div class="w3ls-pos">
    <h1>登录界面</h1>
    <div class="w3ls-login box">
        <!-- form starts here -->
        <!--			<form>-->
        <div class="agile-field-txt">
            <label for="username"></label><input type="text" value="admin" name="username" placeholder="请输入用户名"
                                                 required="" id="username"/>
        </div>
        <div class="agile-field-txt">
            <label for="password"></label><input type="password" value="123456" name="password" placeholder="请输入密码"
                                                 required="" id="password"/>
        </div>
        <div class="agile-field-txt">
            <label for="captcha"></label><input type="text" id="captcha" name="captcha" placeholder="请输入验证码">
        </div>
        <div class="agile-field-txt">
            <div style="float: right">
                <a href="javascript:change();" rel="external nofollow" title="看不清,换一张？">
                    <img id="refreshCaptcha" width="100" height="38" src="/captcha" alt="#">
                </a>
            </div>
            <div class="agile_label">
                <input id="check3" name="check3" type="checkbox" value="show password">
                <label class="check" for="check3">记住我</label>
            </div>
        </div>
        <div class="w3ls-bot">
            <button id="loginBtn">登录</button>
        </div>
        <!--			</form>-->
    </div>
    <!-- //form ends here -->
    <!--copyright-->
    <div class="copy-wthree">
        <p>© 2023 Particles Login Form. All Rights Reserved | Design by
            <a href="#" target="_blank"></a>
        </p>
    </div>
    <!--//copyright-->
</div>
<!-- scripts required  for particle effect -->
<!--	<script src='/js/particles.min.js'></script>-->
<!--	<script src="/js/index.js"></script>-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js" charset="utf-8"></script>
<script th:inline="none">
    // 点一下验证码图片，换一下验证码
    function change() {
        document.getElementById("refreshCaptcha").src = "/captcha?r=" + Math.random();
    }

    // 提示信息
    let msg = function (info) {
        layer.msg(info, {
            icon: 2,
            time: 1500
        });
    }

    layui.use(['form', 'common'], function () {
        let form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // 登录过期的时候，跳出ifram框架
        if (top.location !== self.location) top.location = self.location;


        $("#loginBtn").on("click", function () {

            let username = $('#username').val();
            let password = $('#password').val();
            let captcha = $("#captcha").val();

            if (username == null || username === '') {
                msg("用户名不能为空");
                return false;
            }

            if (password == null || password === '') {
                msg("密码不能为空");
                return false;
            }

            if (captcha == null || captcha === '') {
                msg("验证码不能为空");
                return false;
            }

            $.post("/verify", {code : captcha}, function () {
                $.post("/login", {username: username, password: password}, function (res) {
                    if (res.code === 1) {
                        $.get("/remove/captcha");
                        window.location.href = '/index';
                    } else {
                        window.location.href = '/login';
                    }
                });
            });



        });


    });


</script>
<!-- //scripts required for particle effect -->
</body>

</html>